<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge, chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>Preview</title>
    <link href="https://fonts.loli.net/icon?family=Material+Icons" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/gh/SomeBottle/OdIndex/assets/material.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/prismjs@1.17.1/themes/prism-solarizedlight.css">
	<style>
	.vd{
	   width:100%;
	   display:none;
	}
	.pic{
	   max-width:100%;
	   max-height:600px;
	   display:none;
	}
	.au{
	   width:100%;
	   display:none;
	}
	input{
	   width:100%;
	   border-top:none;
	   border-left:none;
	   border-right:none;
	   margin:8px 0 8px 0;
	}
	label{
	   font-size:8px;
	   color:rgba(0,0,0,.54);
	   pointer-events:none;
	}
	.ipt{
	   margin:16px 0 8px 0;
	}
	.btn{
	   background-color:#4b8e8d;
	   color:white;
	   border:none;
	   cursor:hand;
	   padding:10px;
	   border-radius:5px;
	}
 	</style>
</head>
<div id="night-mask" style="position: fixed;top: 0;left: 0;width: 100%;height: 100%;z-index: 2147483647;pointer-events: none;mix-blend-mode: multiply;transition: opacity 0.1s ease 0s;opacity:0.13;display:block;background: #000000;"></div>
<body>
    <nav><a class="brand">Od Preview</a></nav>
    <div class="container">
	    <audio id='au' class='au' src='' controls="controls"></audio>
	    <img src='https://cdn.jsdelivr.net/gh/SomeBottle/OdIndex/assets/loading.png' class='pic' id='pic'></img>
        <video class='vd' id='vd' controls="controls" src=""></video>
		<div class='ipt'>
		   <label>直链地址</label>
		   <input type='text' id='dr'></input>
		</div>
		<button class='btn' onclick='down()'>直接下载</button>
    </div>
    <div style="flex-grow:1"></div>
    <footer>
        <p>Originally designed by <a href="https://github.com/heymind/OneDrive-Index-Cloudflare-Worker">Heymind</a>.</p>
    </footer>
    <script src="https://cdn.jsdelivr.net/npm/prismjs@1.17.1/prism.min.js" data-manual=""></script>
    <script src="https://cdn.jsdelivr.net/npm/prismjs@1.17.1/plugins/autoloader/prism-autoloader.min.js"></script>
    <style>
        .othumb {
            position: absolute;
            background: #FAFAFA;
            box-shadow: 0 0 5px #888;
            border-radius: 8px;
            transition: 1s ease;
            overflow: hidden;
            opacity: 0
        }
    </style>
	<script>
	var previewurl='{{url}}',previewtype='{{suffix}}',audios=['ogg','mp3','wav','m4a'],videos=['mp4','webm'],pics=['jpg','jpeg','png','gif','webp'];
	if(audios.indexOf(previewtype)!==-1){
	   document.getElementById('au').style.display='block';
	   document.getElementById('au').src=previewurl;
	}else if(videos.indexOf(previewtype)!==-1){
	   document.getElementById('vd').style.display='block';
	   document.getElementById('vd').src=previewurl;
	}else if(pics.indexOf(previewtype)!==-1){
	   document.getElementById('pic').style.display='block';
	   document.getElementById('pic').src=previewurl;
	}
	var dl=location.href.split('?');
	dl.pop();
	dl=dl.join('?');
	document.getElementById('dr').value=dl;
	function down(){
	   window.open(dl,'_self');
	}
	</script>
</body>
</html>